<template>
	<view>
		<view class="txt">
			<text>Welcome to<br />Hope Senlan</text>
		</view>

		<view class="container">
			<text class="text-container">Log In</text>
			<input class="input" v-model="username" placeholder="用户名"></input>
			<input class="input" v-model="password" type="password" placeholder="密码"></input>
			<button class="btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			};
		},
		methods: {
			login() {
				if (this.username == '') {
					uni.showToast({
						title: '请输入账户或密码',
						icon: 'none',
						duration: 1000
					});
					return false;
				} else {
					// 执行登录逻辑  
					uni.request({
						url: 'http://192.168.100.75:9090/sl-user/login',
						method: 'POST',
						data: {
							username: this.username,
							password: this.password
						},
						success: res => {
							//验证成功，获取服务器返回结果
							const result = res.data;
							if (result.success === true) {
								//获取到session或token，保存到本地
								const token = result.token;
								uni.setStorageSync('token', token);
								//验证通过就重载页面
								uni.reLaunch({
									url: '/pages/list/shouye'
								});
							} else {
								uni.showToast({
									title: '登陆失败，请检查用户名和密码'
								});
							}
						},
						fail: () => {

						}
					})
				}
			}
		}
	};
</script>

<style scoped>
	page {
		background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);

	}

	.txt {
		padding-top: 34%;
		padding-left: 7%;
		font-size: 60rpx;
		color: aliceblue;
	}

	.container {
		width: 100%;
		height: 70%;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 80rpx 80rpx 0 0;
	}

	.text-container {
		position: absolute;
		top: 10%;
		left: 7%;
		font-size: 60rpx;
	}

	.input {
		width: 80%;
		margin-bottom: 16px;
		padding: 10px;
		border: 2px solid #ccc;
		border-radius: 50rpx;
	}

	.btn {
		margin-top: 10%;
		width: 85%;
		background-color: #409EFF;
		color: #fff;
		border-radius: 50rpx;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		padding: 10rpx;
	}
</style>